<style>
    .file-item{
        display: inline-block;
        position: relative;
        margin-right: 5px;
    }
    .file-item:hover > div{
        display: block !important;
    }
    .file-item font{
        color: #1E9FFF;
        cursor: pointer;
    }
    .file-item i{
        margin-right: 5px;
    }
</style>
<template>
    <div>
        <button type="button" @click="upload()" style="margin-bottom: 10px;" v-if="deal">上传附件</button>
        <div :id="rand">
            <span v-for="(v,i) in files" class="file-item" :data-i="i" >
                <i class="fa fa-paperclip"></i><font @click="download(v)">{{v.name}} {{v.hint}}</font>
                <i v-if="deal" class="fa fa-times" @click="remove(i)"></i>
            </span>
        </div>
    </div>
</template>
<script>
    function randomNum(minNum,maxNum){
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }

    var component = {
        props: ["deal", "files"],
        data: function () {
            return {
                rand: "annex-" + randomNum(10000000,9999999)
            }
        },
        watch: {
            deal: function (nv) {
                if(nv){
                    var t = this;
                    $.contextMenu({
                        // define which elements trigger this menu
                        selector: "#" + this.rand + " .file-item",
                        // define the elements of the menu
                        items: {
                            del: {
                                name:"删除",
                                callback: function () {
                                    if(!t.deal){
                                        return
                                    }
                                    var i = $(this).attr('data-i');
                                    t.files.splice(i, 1);
                                }
                            }
                        }
                        // there's more, have a look at the demos and docs...
                    });
                }
            }
        },
        methods: {
            upload: function () {
                window.app.upload(this.files);
            },
            remove: function(i){
                this.files.splice(i, 1);
            },
            download: function (v) {
                if(!v.id){
                    return
                }
                location.href = "/api/bpm/workflow/download?name=" + v.name + "&path=" + v.id;
            }
        },
        mounted: function () {

        }

    }
</script>